<template>
  <div class="home">
    <!-- <HollowWorld /> -->
    <ul>
      <router-link to="/A">A组件</router-link>
      <router-link to="/B">B组件</router-link>
      <router-link to="/C">C组件</router-link>
      <router-link to="/D">D组件</router-link>
    </ul>
    {{ aaa }}
    <button @click="updata">更新</button>
    <keep-alive include="A,B,C,D" max="3" exclude="B">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
import HollowWorld from "@/components/HelloWorld.vue";

export default {
  name: "HomeView",
  data() {
    return {
      aaa: "11",
    };
  },
  methods: {
    updata() {
      this.aaa = 222;
    },
  },
  // beforeCreate() {
  //   console.log("父 1");
  // },
  created() {
    console.log("父 2 created");
  },
  // beforeMount() {
  //   console.log("父 3");
  // },
  // mounted() {
  //   console.log("父 4");
  // },
  // updated() {
  //   console.log("父 5 更新前");
  // },
  // beforeUpdate() {
  //   console.log("父 6 更新后");
  // },
  // beforeDestroy() {
  //   console.log("父 6 销毁前");
  // },
  destroyed() {
    console.log("父 6 销毁");
  },
  // keepalive时候触发
  activated() {}, // 激活状态
  deactivated() {}, // 失去激活状态
  components: {
    HollowWorld,
  },
};
</script>
<style lang="less">
</style>
